<template>
  <div class="show_different">
    <template v-if="showName == '张飞'">
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item label="Other">
          <a-input v-decorator="['other']" />
        </a-form-item>
        <a-form-item label="Name">
          <a-input v-decorator="['name']" />
        </a-form-item>
        <a-form-item label="Phone">
          <!-- <a-input v-decorator="['phone', { rules: [{ required: true, message: 'Please input your note!' }] }]" /> -->
          <a-input v-decorator="['phone']" />
        </a-form-item>
        <a-form-item label="Email">
          <a-input v-decorator="['email']" />
        </a-form-item>
        <a-form-item label="Note">
          <a-input v-decorator="['note']" />
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit">
            Submit
          </a-button>
        </a-form-item>
      </a-form>
    </template>
    <template v-if="showName == '李逵'">
      {{ showName }}
    </template>
    <template v-if="showName == '林冲'">
      {{ showName }}
    </template>
  </div>
</template>

<script>
import { requestPage } from '@/api/addother'
export default {
  data() {
    return {
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      showName: null
    }
  },
  created() {
    console.log(this.$route.query.id)
    this.getData()
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          let catStr = ''
          for (const key in values) {
            catStr += key + ':' + values[key] + ';'
          }
          console.log(catStr)
          console.log('Received values of form: ', values)
        }
      })
    },
    getData() {
      requestPage(this.$route.query.id ? this.$route.query.id : 1).then(res => {
        if (res.code == 200) {
          this.showName = res.title
        }
      })
    }
  }
}
</script>
